<template>
  <div class="findHead">
    <div class="header">
      <p>{{mess}}</p>
    </div>
    <ul class="topBar">
      <li v-for="(item,idx) in topData" :key="idx">
        <router-link active-class="active" :to="`/find/${item.path}`">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "topNav",
  props:{
    topData:Array,
    mess:String
  },
};
</script>
<style scoped>
.active{
  position: relative;
}
.active::after{
  content:'';
  width:80%;
  border: 1px solid red;
  position: absolute;
  left: 8%;
  bottom: -0.1rem;
}
.findHead{
    position: fixed;
    width: 3.75rem;
    z-index: 100;
}
.header {
  height: 0.88rem;
  background: #c30d23;
  position: relative;
}
.header p {
  font-size: 0.2rem;
  position: absolute;
  left: 1.49rem;
  bottom: 0.09rem;
  color: #fff;
}
.topBar {
  height: 0.48rem;
  line-height: 0.48rem;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-around;
  background:#fff;
}
</style>